<template>
    <div class="index-container border-box">
        <div id="mapScreen" :class="['flex-column',fullScreen && 'full_screen']">
            <div class="screen_header">
                <div class="header_side flex-row">
                    <!-- <a-select class="select_project" v-if="userInfo.userType == 'super_admin'" placeholder="选择项目">
                        <a-select-option v-for="project in projectList" :value="project.companyCode" :key="project.companyCode">
                        {{ project.companyName }}
                        </a-select-option>
                    </a-select> -->
                    <div class="right-menu-item pointer boxHover" @click.stop="fullScreenButton">
                        <svg-icon :icon="fullScreen ? 'exit-fullscreen' : 'fullscreen'" color="#009bd0" :size="18" />
                    </div>
                </div>
                <img class="header_bg" src="@/assets/screen_header.png"/>
            </div>
            <!-- 大屏主要内容 -->
            <div class="screen_body flex-column">
                <statistics-box/>
                <div class="screen_main flex-row">
                    <div class="side flex-column">
                        <liquid-trend class="trend chart_item"/>
                        <div class="chart_item flex-row">
                            <question-pie class="question_item" style="flex:0.75"/>
                            <alarm-bar class="chart_item"/>
                        </div>
                    </div>
                    <div class="main">
                        <map-location/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import statisticsBox from './components/statistics-box.vue';
import liquidTrend from './components/liquid-trend.vue';
import QuestionPie from './components/question-pie.vue'
import AlarmBar from './components/alarm-bar.vue'
import MapLocation from './components/map-location.vue'
import {remoteList} from '@/api/system/tenant'

export default {
    name: 'Home',
    components:{
        statisticsBox,
        liquidTrend,
        QuestionPie,
        AlarmBar,
        MapLocation,
    },
    data() {
        return {
            fullScreen: false,
            projectList:[]
        };
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.accountInfo
        })
    },
    created(){
        if(this.userInfo.userType == 'super_admin'){
            this.getTenantList()
        }
    },
    methods: {
        fullScreenButton() {
            let element = document.querySelector('#mapScreen');
            if (this.fullScreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
            this.fullScreen = !this.fullScreen;
        },
        //查询租户列表
        async getTenantList(){
            let res = await remoteList({page:1,size:100});
            let {list} = res.data;
            this.projectList = list;
        }
    }
};
</script>
<style lang="scss">
.screen_block_box{
    padding: 0 15px;
    border: 1px solid #004e97;
    background: #052766;
    .header{
        font-size: 16px;
        color: #23cdff;
        font-weight: 500;
        padding: 8px 0;
        border-bottom: 1px solid #064485;
    }
}
</style>
<style lang="scss" scoped>
::v-deep .ant-select-selection{
    color: #009bd0;
    background: #00163f;
    border-color: #009bd0;
}
::v-deep .ant-select-arrow{
    color: #009bd0;
}
#mapScreen{
    background: #00163f;
    margin: -24px -24px -24px -24px;
    height: calc(100vh + 128px);
    &.full_screen{
        height: 100vh;
    }
    .screen_header{
        width: 100%;
        position: relative;
        .header_side{
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            align-items: center;
            z-index: 9;
        }
        .select_project{
            margin-right: 20px;
            width: 150px;
        }
        .header_bg{
            width: 100%;
            // position: absolute;
            // width: 100%;
            // top: 0;
            // left: 0;
        }
    }
    .screen_body{
        width: 100%;
        flex: 1;
        padding: 0 20px 20px;
        box-sizing: border-box;
        overflow: hidden;
        .screen_main{
            width: 100%;
            flex: 1;
            overflow: hidden;
            .side{
                flex: 1;
                flex-shrink: 0;
                .chart_item{
                    flex: 1;
                }
                .trend{
                    margin-bottom: 20px;
                }
                .question_item{
                    margin-right: 20px;
                }
            }
            .main{
                margin-left: 20px;
                flex: 1;
                border: 1px solid #004e97;
            }
        }
    }
}
</style>
